@import '../../../publicstyle/publicstyle.scss';

page {
    background-image: url('https://qmtestimage.oss-cn-guangzhou.aliyuncs.com/tujian-bj.png');
}

.swiperbox {
    height: 60vh;
}


.picdetailmain {

    //navbar
    .navbar {
        // height: 210rpx;
        padding-top: 120rpx;

        .backbtn {
            margin-left: 30rpx;

            image {
                width: 45rpx;
                height: 45rpx;
            }
        }

        .navtitle {
            font-size: 34rpx;
            color: #333333;
            margin-left: 237rpx;
        }
    }

    .pic_container {
        width: 100%;

        height: 90vh;
        background: url('https://qmtestimage.oss-cn-guangzhou.aliyuncs.com/BJ-di%402x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .numbox {
            width: 100%;
            height: 140rpx;
            position: relative;

            .picnum {
                width: 333rpx;
                height: 78rpx;
                background: url('https://qmtestimage.oss-cn-guangzhou.aliyuncs.com/glass-zhao%402x.png') no-repeat;
                background-size: contain;
                position: absolute;
                right: 90rpx;
                bottom: 10rpx;
                border-radius: 50rpx;
                display: flex;
                align-items: center;
                justify-content: space-evenly;


                .picleft {
                    width: 164rpx;
                    height: 68rpx;
                    background: url('https://qmtestimage.oss-cn-guangzhou.aliyuncs.com/jindu-ye%20%E6%8B%B7%E8%B4%9D%402x.png') no-repeat;
                    background-size: contain;
                    display: flex;
                    align-items: center;
                    font-family: 'alifontheavy';
                    color: #fff;
                    text-shadow: -1px -1px 0 #A67545, 1px -1px 0 #A67545, -1px 1px 0 #A67545, 1px 1px 0 #A67545;
                    justify-content: center;
                    padding-left: 10rpx;

                }

                :nth-child(2) {
                    color: #fff;
                    font-size: 26rpx;
                    letter-spacing: 2rpx;
                    margin-right: 10rpx;
                }

            }
        }

        .bookmain {
            margin-left: 80rpx;
            width: 589rpx;
            height: 64vh;
            overflow: hidden;
            // background: rebeccapurple;

            .pictitle {
                margin-top: 40rpx;

                image {
                    width: 589rpx;
                    height: 106rpx;
                }
            }

            .booklist {
                width: 98%;
                height: 84%;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 264rpx 264rpx;
                grid-row-gap: 20rpx;
                justify-content: space-around;

                .bookitem {
                    height: 419rpx;
                    background-size: cover;
                    background-repeat: no-repeat;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    text-align: center;
                    position: relative;

                    .cardbox {
                        .title {
                            margin: 0 auto;
                            width: 228rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            margin-top: 34rpx;
                            font-family: 'alifontheavy';
                            font-size: 22rpx;
                            color: #4A3CBC;
                            text-align: left;

                        }
                    }


                    .noimg {
                        width: 241rpx;
                        height: 349rpx;
                        filter: contrast(0%);

                    }


                    .haveimg {
                        width: 241rpx;
                        height: 349rpx;
                    }

                    .question {
                        position: absolute;
                        margin-left: 92rpx;

                        image {
                            width: 68rpx;
                            height: 108rpx;
                        }
                    }

                    .bottombox {
                        width: 264rpx;
                        height: 89rpx;
                        background: url('https://qmtestimage.oss-cn-guangzhou.aliyuncs.com/light-di1%20%402x.png');
                        background-size: cover;
                        background-repeat: no-repeat;
                        position: absolute;
                        bottom: 0;
                        box-shadow: 0rpx 10rpx 10rpx rgba($color: #000000, $alpha: .3);
                        border-bottom-left-radius: 20rpx;
                        border-bottom-right-radius: 20rpx;

                        .title {
                            width: 230rpx;
                            font-size: 24rpx;
                            color: #FDDF34;
                            font-family: 'alifontheavy';
                            // text-shadow: 4px 4spx 10px rgba(118, 35, 166, 0.31);
                            text-shadow: 1px -1px 0 #4A2CBB, 1px 2px 0 #4A2CBB, 3px 2px 0 #4A2CBB, 3px 1px 0 #4A2CBB;
                            text-align: left;
                            margin-left: 26rpx;
                            margin-top: 14rpx;

                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            text-overflow: ellipsis;

                        }

                        .shouji {
                            position: absolute;
                            right: 0;
                            top: -60rpx;

                            image {
                                width: 99rpx;
                                height: 75rpx;
                            }
                        }
                    }
                }
            }

        }

        .sharebtn {
            text-align: center;
            margin-top: 20rpx;

            image {
                width: 230rpx;
                height: 107rpx;
            }
        }

        .btnbox {
            display: flex;
            justify-content: space-between;

            .nextbtn {
                margin-right: 60rpx;
                margin-top: -50rpx;

                image {
                    width: 118rpx;
                    height: 118rpx;
                }
            }

            .pro {
                margin-left: 80rpx;

                image {
                    transform: scale(-1, 1);
                }
            }
        }



    }
}